<script lang="ts" setup>
import { ref, reactive, watchEffect, watch } from "vue";
import { getProListApi } from "@/api/Pro";

interface IPro {
  "banners"?: Array<string>,
  "proid": string,
  "category": string,
  "brand": string,
  "proname": string,
  "originprice": number,
  "sales": number,
  "stock": number,
  "desc": string,
  "issale": number,
  "isrecommend": number,
  "discount": number,
  "isseckill": number,
  "img1": string,
  "img2": string,
  "img3": string,
  "img4": string
}


//一、 分页相关：
// 1)、每页的条数
const pageSize = ref(5);
// 2）、当前页码
const currentPage = ref(1);
// 3)、总条数
const total = ref(0);

// 一、产品列表相关页面：

// 3)、当前页面的数据。
let list: Array<IPro> = reactive<Array<IPro>>(new Array<IPro>());

watchEffect(() => {
  console.log("watchEffect");
  
  getProListApi({
    count: currentPage.value,
    limitNum: pageSize.value
  })
    .then((res: any) => {
      if (res.code === "200") {
        total.value = res.total;
        list.splice(0, list.length, ...res.data);
      }
    });
})

</script>

<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column fixed prop="proid" label="编号" width="180" />
    <el-table-column fixed prop="proname" label="产品名称" width="180" />
    <el-table-column prop="category" label="分类" width="180" />
    <el-table-column prop="brand" label="品牌" width="180" />
    <el-table-column prop="originprice" label="价格" width="180" />
    <el-table-column prop="discount" label="折扣" width="180" />
    <el-table-column prop="sales" label="销量" width="180" />
    <el-table-column prop="stock" label="库存" width="180" />
    <el-table-column width="180" label="是否下架">
      <template #default="scope">
        <el-switch v-model="scope.row.issale"></el-switch>
      </template>
    </el-table-column>
    <el-table-column width="180" label="是否推荐">
      <template #default="scope">
        <el-switch v-model="scope.row.isrecommend"></el-switch>
      </template>
    </el-table-column>
    <el-table-column width="180" label="是否秒杀">
      <template #default="scope">
        <el-switch v-model="scope.row.isseckill"></el-switch>
      </template>
    </el-table-column>
    <el-table-column width="180" label="图片1">
      <template #default="scope">
        <img :src="scope.row.img1">
      </template>
    </el-table-column>
    <el-table-column width="180" label="图片2">
      <template #defalut="scope">
        <img :src="scope.row.img2">
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="删除">
      <template #default="scope">
        <el-button @click="deleteHandler(scope.row.bannerid)">删除</el-button>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="修改">
      <template #default="scope">
        <el-button @click="deleteHandler(scope.row.bannerid)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:pageSize="pageSize" v-model:current-page="currentPage" background layout="prev, pager, next"
    :total="total" />
</template>

<style scoped>
img {
  width: 200px;
  height: 50px;
}
</style>